<template>
	<view>
		<view class="select_title u-padding-20" @click="show = true">
			<input v-model="time" disabled class="dis_inl_blo va_m u-margin-right-20" type="text" placeholder="请选择时间段">
		</view>
		<u-calendar v-model="show" :mode="mode" @change="change">
			<view slot="tooltip">
				<view class="top_title u-text-center" style="color:#0060F7;padding:30rpx 0;">
					请选择开始/结束时间
				</view>
			</view>
		</u-calendar>
		
		<view style="background-color: #FFFFFF;margin-top: 1px;" class="u-border-bottom">
			<u-tabs :list="tabs" :bold='true' activeColor="#0B868E" :current="current" @change="changeTabs">
			</u-tabs>
		</view>
		<u-empty :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
		<view class="job_con u-padding-20 u-margin-top-20" v-for="(item,index) in jobList" :key="index" @click="todetail(item.id)">
			<view class="job_person u-rela">
				<image class="va_m" :src="item.avatar"></image>
				<view class="dis_inl_blo va_m">
					<view>{{item.author}}的工作日志</view>
					<text style="font-size: 24rpx;color:#666;">{{item.time}}</text>
				</view>
				<u-icon style="top:10rpx;" class="u-abso pos_right" name="more-dot-fill" color="#999" size="30"></u-icon>
			</view>
			<view class="u-flex u-row-between u-col-top job_intro">
				<view style="width:63%;">
					<view class="job_complete">今日完成工作：{{item.complete}}</view>
					<view class="job_complete">未完成工作：{{item.un_complete}}</view>
				</view>
				<image mode="aspectFill" :src="item.img[0]"></image>
			</view>
			<view style="color:#007AFF;">查看全文</view>
		</view>
		<view class="fabu" @click="showmask=true">
			<image src="../../static/release.png" mode="heightFix"></image>
		</view>
		<u-mask :show="showmask">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view @click="torelease">工作日志</view>
					<view @click="toreleaseWeek">周报</view>
					<view @click="toreleaseMonth">月报</view>
					<view class="u-text-right" style="color:#007AFF;font-size: 26rpx;" @click="showmask=false">取消</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		selectLog
	} from "@/service/indexService.js";
	export default {
		data () {
			return {
				current:0,
				tabs: [{
						name: '全部'
					},
					{
						name: '我发出的'
					},
					{
						name: '我的团队'
					},
					{
						name: '工作日志'
					},
					{
						name: '周报'
					},
					{
						name: '月报'
					}
				],
				keyword:'',
				show:false,
				mode: 'range',
				time:'',
				showmask:false,
				showEmpty:false,
				start:'',
				end:'',
				jobList:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			selectLog().then(this.selectLog);
		},
		methods:{
			torelease:function(){
				this.showmask=false;
				uni.navigateTo({
					url:'./releaseJobLog'
				})
			},
			toreleaseWeek(){
				this.showmask=false;
				uni.navigateTo({
					url:'./releaseWeekLog'
				})
			},
			toreleaseMonth(){
				this.showmask=false;
				uni.navigateTo({
					url:'./releaseMonthLog'
				})
			},
			selectLog(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.jobList = e.result;
				} else if(e.code == 400) {
					this.showEmpty = true;
					this.jobList = [];
				}
			},
			todetail:function(id){
				uni.navigateTo({
					url:'./jobLogDetail?id='+id
				})
			},
			change(e) {
				// console.log(e);
				this.time=e.startDate+'-'+e.endDate;
				this.startDate=e.startDate+' '+'00:00:00';
				this.endDate=e.endDate+' '+'24:00:00';;
				selectLog({
					start:e.startDate+' '+'00:00:00',
					end:e.endDate+' '+'24:00:00'
				}).then(this.selectLog)
			},
			changeTabs(e) {
				let par;
				this.current = e;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						break;
					case 2:
						par = {
							status: 1
						};
						break;
					case 3:
						par = {
							status: -1
						};
						break;
					default:
						par = {
							status: 99
						};
				}
				// getVisit(par).then(this.getVisit);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f3f5f7;
	}
	.select_title{
		background-color: #0c838b;
	}
	.select_title input{
		width:97%;
		height:50rpx;
		padding:0 10rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 25rpx;
		background-color: #fff;
	}
	.job_con{
		background-color: #fff;
	}
	.job_person{
		margin-bottom:20rpx;
		font-size: 32rpx;
		color:#000;
	}
	.job_person image{
		width:100rpx;
		height:100rpx;
		margin-right:30rpx;
		border-radius: 50%;
	}
	.job_intro{
		font-size: 28rpx;
		color:#555;
		max-height: 200rpx;
		overflow: hidden;
	}
	.job_complete{
		display:-webkit-box;
		overflow: hidden; 
		text-overflow: ellipsis;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
	}
	.job_intro image{
		border-radius: 20rpx;
		width:34%;height:200rpx;
	}
	.fabu{
		position: fixed;
		bottom:150rpx;
		right:30rpx;
		width:100rpx;
		height:100rpx;
		// text-align: center;
		border-radius: 50%;
	}
	.fabu image{
		width:100rpx;
		height:100rpx;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 220px;
		height: 180px;
		padding:20rpx 40rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.rect view{
		height:80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	
</style>

